import React, { memo } from 'react'
import type { FC, ReactNode } from 'react'
import { PlayListCategoryWarp } from './style'
import { useAppSelector } from '@/store'
import { stat } from 'fs'
import { useDispatch } from 'react-redux'
import { changeCurrentCategoryAction } from '@/store/modules/musicplayer'

interface IProps {
  children?: ReactNode
  closeCategory?: any
}

const PlayListCategory: FC<IProps> = (props) => {
  const dispatch = useDispatch()
  const { closeCategory } = props
  const { category } = useAppSelector((state) => ({
    category: state.musicplayer.category
  }))
  function selectCategory(cartegory: string) {
    dispatch(changeCurrentCategoryAction(cartegory))
    closeCategory()
  }
  return (
    <PlayListCategoryWarp id="item">
      <div className="arrow sprite_icon"></div>
      <div className="all">
        <span className="link" onClick={(e) => selectCategory('全部')}>
          全部风格
        </span>
      </div>
      <div className="category">
        {category &&
          category.map((item: any, index: number) => {
            return (
              <dl key={item.name} className={'item' + index}>
                <dt>
                  <i className="icon sprite_icon2"></i>
                  <span>{item.name}</span>
                </dt>
                <dd>
                  {item.subs.map((sItem: any) => {
                    return (
                      <div className="item" key={sItem.name}>
                        <span
                          className="link"
                          onClick={(e) => selectCategory(sItem.name)}
                        >
                          {sItem.name}
                        </span>
                        <span className="divider">|</span>
                      </div>
                    )
                  })}
                </dd>
              </dl>
            )
          })}
      </div>
    </PlayListCategoryWarp>
  )
}

export default memo(PlayListCategory)
